<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:m="http://www.ol4jsf.org"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:o="http://openfaces.org/"
	template="/WEB-INF/esquema/plantillaworkflow.xhtml">

	<style>
		.contentEditData {
			width:100%;
			height:300px;
			overflow:auto;
		}
	</style>
	
	<ui:define name="activityCustomContent">
		<h:panelGroup id="zoomTo">
			<script type="text/javascript">
				function zoomToProperty() {
					bounds = new OpenLayers.Bounds();
					bounds.left = #{dataEntryHelper.envelopeLeft};
					bounds.bottom = #{dataEntryHelper.envelopeBottom};
					bounds.right = #{dataEntryHelper.envelopeRight};
					bounds.top = #{dataEntryHelper.envelopeTop};
					mapEditor.zoomToExtent(bounds, true);
				}
			</script>
		</h:panelGroup>
		<h3>#{messages['dataentry.properties_to_work']}</h3>
		<br/>
		Parcelas por ficha de campo/clave catastral!
		<br />
		<br />
		<h:panelGroup id="selectedParcel" style="color:Red;">
			Parcela seleccionada:
			<br />
			<strong>
				<h:outputText value="#{dataEntryHelper.selectedParcelText}"/>
			</strong>
		</h:panelGroup>
		<br />
		<br />
		Haga clic en predio
		<br/>
		<br/>
		<div class="contentEditData">
			<h:panelGroup id="transactionCnts">
				<h:panelGroup id="requestedParcelList">
					<ui:repeat var="parcel" value="#{dataEntryHelper.requestedParcels}">
						<a4j:commandLink reRender="zoomTo" oncomplete="zoomToProperty()">
							<f:setPropertyActionListener value="#{parcel}" target="#{dataEntryHelper.zoomedInParcel}" />
							<h:outputText value="#{dataEntryHelper.parcelText(parcel)}" />
						</a4j:commandLink>
						<br />
						<h:panelGroup rendered="#{not dataEntryHelper.editing}">
							#{' - '}
							<a4j:commandLink value="Seleccionar"
							reRender="#{dataEntryHelper.reRenderList(false)}"
							oncomplete="zoomToProperty()">
								<f:setPropertyActionListener target="#{dataEntryHelper.rrrHelper.parcelRightsList}" value="#{null}" />
								<f:setPropertyActionListener target="#{dataEntryHelper.rrrHelper.parcelRestrictionsList}" value="#{null}" />
								<f:setPropertyActionListener target="#{dataEntryHelper.rrrHelper.parcelResponsibilitiesList}" value="#{null}" />
								<f:setPropertyActionListener target="#{dataEntryHelper.selectedParcel}" value="#{parcel}" />
							</a4j:commandLink>
							<br />
							<br />
						</h:panelGroup>
					</ui:repeat>
				</h:panelGroup>
				<br/>
				<br/>
				Parcelas vecinas
				<br/>
				<br/>
				<ui:repeat var="parcel" value="#{dataEntryHelper.neighborParcels}">
					<li>
						<a4j:commandLink reRender="zoomTo" oncomplete="zoomToProperty()">
							<f:setPropertyActionListener value="#{parcel}" target="#{dataEntryHelper.zoomedInParcel}" />
							<h:outputText value="#{parcel.fieldTab}" />
							#{" / "}
							<h:outputText value="#{parcel.cadastralKey == null ? '(sin clave catastral)' : parcel.cadastralKey}" />
						</a4j:commandLink>
					</li>
				</ui:repeat>
			</h:panelGroup>
		</div>
		<br/><br/>
		<rich:separator height="3px"/>
		<br/>
	</ui:define>
	
	<ui:define name="mainControls">
		<h:form>
			<a4j:commandButton value="#{messages['button.ok']}" oncomplete="#{rich:component('strict-confirmation-dialog')}.show()">
				<f:setPropertyActionListener target="#{dialogHelper.confirmMsg}" value="#{messages['dataentry.finish']}"/>
				<f:setPropertyActionListener target="#{dialogHelper.jsFunction}" value="finish();"/>
			</a4j:commandButton>
			<a4j:commandButton value="#{messages['button.l8r']}" oncomplete="#{rich:component('confirmation-dialog')}.show()">
				<f:setPropertyActionListener target="#{dialogHelper.confirmMsg}" value="#{messages['dataentry.l8r']}"/>
				<f:setPropertyActionListener target="#{dialogHelper.jsFunction}" value="pause();"/>
			</a4j:commandButton>
		</h:form>
	</ui:define>

	<ui:define name="extraControls">
		<h:form>
			<a4j:commandButton value="#{messages['button.back2analysis']}" oncomplete="#{rich:component('strict-confirmation-dialog')}.show()">
				<f:setPropertyActionListener target="#{dialogHelper.confirmMsg}" value="#{messages['dataentry.back2analysis']}"/>
				<f:setPropertyActionListener target="#{dialogHelper.jsFunction}" value="back2analysis();"/>
			</a4j:commandButton>
		</h:form>
	</ui:define>
	
	<ui:define name="body">
		<style type="text/css">
			.olControlPanel {
				float: right;
				right: 0px;
				height: 30px;
			}
			.olControlPanel div {
				float: right;
				display:block;
				width:  24px;
				height: 24px;
				margin: 5px;
				background-color:red;
			}

			.olControlPanel .olControlNavigationItemActive {
				background-color: blue;
				background-image: url("#{generalHelper.openLayersThemeDefaultImgPath}/pan_on.png");
			}
			.olControlPanel .olControlNavigationItemInactive {
				background-color: orange;
				background-image: url("#{generalHelper.openLayersThemeDefaultImgPath}/pan_off.png");
			}
            .olControlPanel .olControlDrawFeatureItemActive {
                width:  22px;
                height: 22px;
                background-image: url("#{generalHelper.openLayersThemeDefaultImgPath}/draw_line_on.png");
            }
			.olControlPanel .olControlDrawFeatureItemInactive {
				width:  22px;
				height: 22px;
				background-image: url("#{generalHelper.openLayersThemeDefaultImgPath}/draw_line_off.png");
			}
			.olControlPanel .olControlZoomBoxItemInactive {
				width:  22px;
				height: 22px;
				background-color: orange;
				background-image: url("#{generalHelper.openLayersThemeDefaultImgPath}/drag-rectangle-off.png");
			}
            .olControlPanel .olControlZoomBoxItemActive {
				width:  22px;
				height: 22px;
				background-color: blue;
				background-image: url("#{generalHelper.openLayersThemeDefaultImgPath}/drag-rectangle-on.png");
            }
            .olControlPanel .olControlZoomToMaxExtentItemInactive {
				width:  18px;
				height: 18px;
				background-image: url("#{generalHelper.openLayersImgPath}/zoom-world-mini.png");
            }
			.alignTop {
				vertical-align:top;
			}
			.rich-filter-input {
				width: 50px;
			}
			.rich-spinner-input {
				width: 30px;
			}
        </style>

        <a4j:loadScript src="#{generalHelper.openLayersJS}"/>
        <!-- a4j:loadScript src="ol4jsfLibrary.jsf?name=openlayers/OpenLayers.js"/-->
        <!-- script type="text/javascript" src="ol4jsfLibrary.jsf?name=openlayers/OpenLayers.js"></script-->
		<s:remote include="dataEntryHelper"/>
		<s:remote include="analysisHelper"/>
		<script type="text/javascript">
			Seam.Remoting.getContext().setConversationId(#{conversation.id});
		</script>

		<div align="center">
			<strong>INGRESO DE DATOS</strong>
			<br />
			<rich:separator lineType="solid"/>
			<br/>
		</div>

		<center>
			<rich:panel style="width:100%">
				<rich:toolBar height="25" itemSeparator="line">
					<rich:toolBarGroup>
						<h:panelGroup>
						<o:commandButton type="button" onclick="#{rich:component('rightsPanelToolbox')}.show()">
							<h:graphicImage value="/img/rights-icon.png" width="24px" height="24px"/>
							<br />
							<h:outputLabel value="#{messages['dataentry.rights_toolbox']}" style="font-weight:bold;"/>
							<rich:toolTip followMouse="true" direction="top-right" showDelay="500" styleClass="tooltip">
								<span style="white-space:nowrap">
									#{messages['dataentry.rights_toolbox_desc']}
								</span>
							</rich:toolTip>
						</o:commandButton>
						<o:commandButton type="button" onclick="#{rich:component('restrictionsPanelToolbox')}.show()">
							<h:graphicImage value="/img/restrictions-icon.png" width="24px" height="24px"/>
							<br />
							<h:outputLabel value="#{messages['dataentry.restrictions_toolbox']}" style="font-weight:bold;"/>
							<rich:toolTip followMouse="true" direction="top-right" showDelay="500" styleClass="tooltip">
								<span style="white-space:nowrap">
									#{messages['dataentry.restrictions_toolbox_desc']}
								</span>
							</rich:toolTip>
						</o:commandButton>
						<o:commandButton type="button" onclick="#{rich:component('responsibilitiesPanelToolbox')}.show()">
							<h:graphicImage value="/img/responsibilities-icon.png" width="24px" height="24px"/>
							<br />
							<h:outputLabel value="#{messages['dataentry.responsibilities_toolbox']}" style="font-weight:bold;"/>
							<rich:toolTip followMouse="true" direction="top-right" showDelay="500" styleClass="tooltip">
								<span style="white-space:nowrap">
									#{messages['dataentry.responsibilities_toolbox_desc']}
								</span>
							</rich:toolTip>
						</o:commandButton>
						</h:panelGroup>
					</rich:toolBarGroup>
					
					<rich:toolBarGroup>
						<h:panelGroup>
						<o:commandButton type="button" onclick="#{rich:component('splitPanelToolbox')}.show()">
							<h:graphicImage id="divisionImg" value="/img/split-icon.png" width="24px" height="24px"/>
							<br />
							<h:outputLabel value="#{messages['dataentry.split_toolbox']}" for="divisionImg" style="font-weight:bold;" />
							<rich:toolTip followMouse="true" direction="top-right" showDelay="500" styleClass="tooltip">
								<span style="white-space:nowrap">
									#{messages['dataentry.split_toolbox_desc']}
								</span>
							</rich:toolTip>
						</o:commandButton>
						<o:commandButton type="button" onclick="#{rich:component('mergePanelToolbox')}.show()">
							<h:graphicImage id="fusionImg" value="/img/merge-icon.png" width="24px" height="24px"/>
							<br />
							<h:outputLabel value="#{messages['dataentry.merge_toolbox']}" for="fusionImg" style="font-weight:bold;" />
							<rich:toolTip followMouse="true" direction="top-right" showDelay="500" styleClass="tooltip">
								<span style="white-space:nowrap">
									#{messages['dataentry.merge_toolbox_desc']}
								</span>
							</rich:toolTip>
						</o:commandButton>
						</h:panelGroup>
					</rich:toolBarGroup>
					
					<rich:toolBarGroup>
						<o:commandButton type="button" onclick="#{rich:component('editDataPanelToolbox')}.show()">
							<h:graphicImage id="dataImg" value="/img/edit.gif" width="24px" height="24px"/>
							<br />
							<h:outputLabel value="#{messages['dataentry.editdata_toolbox']}" for="dataImg" style="font-weight:bold;" />
							<rich:toolTip followMouse="true" direction="top-right" showDelay="500">
								<span style="white-space:nowrap">
									#{messages['dataentry.editdata_toolbox_desc']}
								</span>
							</rich:toolTip>
						</o:commandButton>
					</rich:toolBarGroup>
					
					<rich:toolBarGroup>
						<o:commandButton type="button" onclick="#{rich:component('undoPanelToolbox')}.show()">
							<h:graphicImage id="undoImg" value="/img/undo-icon.png" width="24px" height="24px"/>
							<br />
							<h:outputLabel value="#{messages['dataentry.undo_toolbox']}" for="undoImg" style="font-weight:bold;" />
							<rich:toolTip followMouse="true" direction="top-right" showDelay="500">
								<span style="white-space:nowrap">
									#{messages['dataentry.undo_toolbox_desc']}
								</span>
							</rich:toolTip>
						</o:commandButton>
					</rich:toolBarGroup>
					
					<rich:toolBarGroup location="right">
						<o:commandButton type="button" onclick="drawParcels();">
							<h:graphicImage id="refreshImg" value="/img/refresh-icon.png" width="24px" height="24px"/>
							<br />
							<h:outputLabel value="#{messages['dataentry.refresh_toolbox']}" for="refreshImg" style="font-weight:bold;" />
							<rich:toolTip followMouse="true" direction="top-right" showDelay="500">
								<span style="white-space:nowrap">
									#{messages['dataentry.refresh_toolbox_desc']}
								</span>
							</rich:toolTip>
						</o:commandButton>
					</rich:toolBarGroup>
					
					<rich:toolBarGroup location="right" width="24px" height="24px">
						<o:commandButton type="button">
							<h:graphicImage value="/img/help.png" width="25px" height="25px"/>
							<br />
							<h:outputLabel value="Ayuda" for="refreshImg" style="font-weight:bold;" />
							<rich:toolTip direction="top-left" showEvent="onclick" zorder="10000">
								<ui:include src="/WEB-INF/includes/showHelpIncl.xhtml">
									<ui:param name="width" value="500" />
									<ui:param name="mainMessage" value="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh." />
									
									<ui:param name="msgBullet"  value="EN DESARROLLO" />
									<ui:param name="msgBullet1" value="EN DESARROLLO" />
								</ui:include>
							</rich:toolTip>
						</o:commandButton>
					</rich:toolBarGroup>
				</rich:toolBar>
				
				<script type="text/javascript">
					var parcel_style = new OpenLayers.Style({'fillColor': '#669933', 'fillOpacity': .8, 'strokeColor': '#aaee77', 'strokeWidth': 3, 'pointRadius': 8, 'label': '${label}'});
					var parcel_style_map = new OpenLayers.StyleMap({'default': parcel_style});
					//alert(parcelFeaturesLayer);
					//alert('el estilo es: ' + parcel_style_map);
					//parcelFeaturesLayer.styleMap = parcel_style_map;
				
					function drawNeighborParcelsAux(parcelsGML) {
						var prop = new OpenLayers.Format.GML().read(parcelsGML);
						neighborParcelLayer.addFeatures(prop);
					}
					function drawNeighborParcels() {
						var dataEntryHelper = Seam.Component.getInstance('dataEntryHelper');
						dataEntryHelper.getNeighborParcelsGML(drawNeighborParcelsAux);
					}
					function drawRequestedParcelsAux(parcelsGML) {
						var prop = new OpenLayers.Format.GML().read(parcelsGML);
						parcelFeaturesLayer.addFeatures(prop);
					}
					function drawRequestedParcels() {
						var dataEntryHelper = Seam.Component.getInstance('dataEntryHelper');
						dataEntryHelper.getRequestedParcelsGML(drawRequestedParcelsAux);
					}
				</script>
				
				<h:panelGroup id="drawParcelFunctions">
					<script type="text/javascript">
						function drawParcelsReRender() {
							var reqParcelsGML = '#{generalHelper.escapeJS( dataEntryHelper.getRequestedParcelsGML() )}';
							var neighParcelsGML = '#{generalHelper.escapeJS( dataEntryHelper.getNeighborParcelsGML() )}';
							
							var reqParcels = new OpenLayers.Format.GML().read(reqParcelsGML);
							var neighParcels = new OpenLayers.Format.GML().read(neighParcelsGML);

							parcelFeaturesLayer.destroyFeatures();
							neighborParcelLayer.destroyFeatures();
							
							parcelFeaturesLayer.addFeatures(reqParcels);
							parcelFeaturesLayer.addFeatures(neighParcels);
						}
					</script>
				</h:panelGroup>
				
				
				<m:map id="mapEditor" width="100%" height="450px" options="#{mapHelper.mapOptions(false)}" jsVariable="mapEditor">
					<m:wmsLayer name="Centroides de predio"
						url="#{generalHelper.wmsUrl}"
						params="{layers: '#{generalHelper.primaryWMSLayer}', transparent: true, format: 'image/png'}"
						options="{ projection: '#{generalHelper.workingSRS}', isBaseLayer: true }">
					</m:wmsLayer>

					<m:vectorLayer name="" jsVariable="vlayer"/>
					<m:vectorLayer name="" jsVariable="polyLayer"/>
					<m:vectorLayer name="parcelFeaturesLayer" jsVariable="parcelFeaturesLayer" />
					<m:vectorLayer name="neighborParcelLayer" jsVariable="neighborParcelLayer"/>
					<m:navigationControl />
					<m:panZoomBarControl />
					<m:layerSwitcherControl options="{ascending:false}"/>
					<m:scaleLineControl />
					<m:mousePositionControl />
					<m:overviewMapControl />
					<m:panelControl jsVariable="mapPanel">
						<m:navigationControl options="{title:'#{messages['map.navigation']}'}"/>
						<m:zoomBoxControl options="{title:'#{messages['map.zoom_box']}'}"/>
						<m:zoomToMaxExtentControl options="{title:'#{messages['map.zoom_to_max_extent']}'}" />
					</m:panelControl>
					<m:script>#{mapHelper.dataEntryMapScript}</m:script>
				</m:map>
				
           	</rich:panel>
		</center>
		
		<br/>
		<br/>
			
		<h:form id="misc">
			<a4j:jsFunction name="drawParcels" reRender="drawParcelFunctions" oncomplete="drawParcelsReRender()"/>
			<a4j:jsFunction id="finish" name="finish" action="#{transactionHelper.endDataEntry}"/>
			<a4j:jsFunction name="back2analysis" action="#{transactionHelper.dataEntryBackToAnalysis}"/>
			<a4j:jsFunction name="pause" action="home"/>
		</h:form>
		
		
		<ui:include src="toolbox/mutateRRR.xhtml"/>
		<ui:include src="toolbox/split.xhtml"/>
		<ui:include src="toolbox/merge.xhtml"/>
		<ui:include src="toolbox/editData.xhtml"/>
		<ui:include src="toolbox/undo.xhtml" />
	</ui:define>
	
</ui:composition>
